<template>
    <div class="tab-header">
        <div class="tab-header-one" 
            v-for="(item, index) in tabs" 
            :style="{color: item.isChoose ? 'red' : 'black' }" 
            :key="index"
            @click="chooseTab(index)"
        >{{ item.text }}</div>
    </div>
</template>

<script>
export default {
    name: 'TabHeader',
    data() {
        return {
            tabWidth: null,
            slideBox: null,
            tabs: [{
                text: '1',
                isChoose: true
            }, {
                text: '2',
                isChoose: false
            }]
        }
    },
    mounted() {
        let tab = document.getElementById('tab');
        let tabWidth = tab.getBoundingClientRect().width;
        let allContent = document.getElementsByClassName('content');
        this.tabWidth = tabWidth;
        for (let i = 0, len = allContent.length; i < len; i ++) {
            allContent[i].style.width = `${ tabWidth }px`;
        }
    },
    methods: {
        chooseTab(index) {
            let tabs = this.tabs;
            tabs.forEach((e, idx, arr) => {
                arr[idx].isChoose = idx === index ? true : false;
            });

            if (this.slideBox === null) {
                this.slideBox = document.getElementById('tab-content');
            } 
            
            let slideBoxLeft = -1 * index * this.tabWidth;
      
            this.slideBox.style.left = `${ slideBoxLeft }px`;

        }
    }
}
</script>

<style scoped>
    .tab-header {
        width: 100%;
        height: 40px;
        display: flex;
    }
    .tab-header-one {
        height: 100%;
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
